---
title: block、inline 和 inline-block 有什么区别？
---

| 属性 | `block` | `inline-block` | `inline` |
| --- | --- | --- | --- |
| 尺寸 | 填充父容器的宽度。 | 取决于内容。 | 取决于内容。 |
| 定位 | 从新行开始，并且不允许在其旁边有其他 HTML 元素（除非你添加 `float`） | 与其他内容一起流动，并允许其他元素在其旁边。 | 与其他内容一起流动，并允许其他元素在其旁边。 |
| 可以指定 `width` 和 `height` | 是 | 是 | 否。如果设置将被忽略。 |
| 可以使用 `vertical-align` 对齐 | 否 | 是 | 是 |
| 边距和内边距 | 所有边都受尊重。 | 所有边都受尊重。 | 仅水平边受尊重。垂直边（如果指定）不影响布局。它占用的垂直空间取决于 `line-height`，即使 `border` 和 `padding` 在内容周围可见。 |
| Float | - | - | 变成类似 `block` 元素，你可以在其中设置垂直边距和内边距。 |
| 用例 | 布局元素，如 `<div>`、`<p>`、`<section>`。 | 用于需要自定义大小但与文本保持一致的按钮、图像和表单字段。 | 链接 `<a>`、文本格式 `<span>`、文本样式 - 粗体 `<b>`、斜体 `<i>`。|
